<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { CommentAddReq, MessagePageQuery, MessageVo } from '@/api/comment/type'
import { addComment, clickLike, pageMessage } from '@/api/comment'

const pageQueryParams = ref(<MessagePageQuery>{
  pageNum: 1,
  pageSize: 10,
  startIndex: -1
})

const needContinue = ref(true)

const dataQueryIntervalId = ref(-1)

const danmus = ref(<MessageVo[]>[])

const danmakuRef = ref()

const danmuText = ref('')

const isDanmuInputClicked = ref(false)

/** 弹幕点赞 没得搞 目前的组件不支持实时渲染 */
const danmuLikeClick = (danmu: MessageVo, index: number) => {
  clickLike(danmu.id).then(({ data: res }) => {
    if (res.code == 200) {
      danmus.value[index].clickLike = !danmus.value[index].clickLike
      if (danmus.value[index].clickLike) {
        danmus.value[index].likeCount++
      } else {
        danmus.value[index].likeCount--
      }
      ElMessage.success('点赞成功')
    }
  })
}

/** 发送弹幕 */
const submitDanmu = () => {
  if (danmuText.value.trim().length < 1) {
    return ElMessage.warning('请至少输入一个有效字符')
  }
  const data: CommentAddReq = {
    type: 0,
    source: 'MESSAGE',
    content: danmuText.value
  }
  addComment(data).then(({ data: res }) => {
    if (res.code == 200) {
      ElMessage.success('发送成功')
      danmuText.value = ''
      dataQueryIntervalId.value = setInterval(dataQueryInterval, 2000)
      // 设置初始值
      needContinue.value = true
    }
  })
}

/** 获取留言列表 */
const getMessageList = () => {
  pageMessage(pageQueryParams.value).then(({ data: res }) => {
    danmus.value = danmus.value.concat(res.data.records)
    console.log(danmus.value)
    // 判断是否继续
    needContinue.value = res.data.records.length > 0
    // 设置起始ID
    pageQueryParams.value.startIndex = danmus.value[danmus.value.length - 1].id
  })
}

const dataQueryInterval = () => {
  // 如果上次查询的数量是0 就重置
  if (!needContinue.value) {
    // pageQueryParams.value.pageNum = 1
    // 查不到就直接把任务停止了
    return clearInterval(dataQueryIntervalId.value)
  }
  getMessageList()
  // 开启播放
  danmakuRef.value.play()
}

onMounted(() => {
  dataQueryInterval()
  dataQueryIntervalId.value = setInterval(dataQueryInterval, 2000)
})

onUnmounted(() => {
  clearInterval(dataQueryIntervalId.value)
})
</script>

<template>
  <Danmaku
    ref="danmakuRef"
    class="danma-container"
    :autoplay="false"
    :use-suspend-slot="true"
    :danmus="danmus"
    :channels="12"
    :use-slot="true"
    :speeds="100"
    :is-suspend="true"
    :random-channel="true"
    :top="30"
    :right="80"
  >
    <template #dm="{ danmu }">
      <div class="danmu-item" :class="[danmu.isMe ? 'btn-item--me' : '']">
        <!--头像-->
        <img v-if="danmu.avatar" class="danmu-item--avatar" :src="danmu.avatar" alt="" />
        <img
          v-else
          class="danmu-item--avatar"
          src="https://danmaku-vue.dshuais.com/avatar.png"
          alt=""
        />
        <!--弹幕信息-->
        <div class="danmu-item--text">{{ danmu.content }}</div>
      </div>
    </template>
    <!--  点赞部分  -->
    <template #suspend="{ danmu, index }">
      <div></div>
      <!--      <div class="danmu-item&#45;&#45;suspend">-->
      <!--        &lt;!&ndash;点赞图标&ndash;&gt;-->
      <!--        <div class="suspend-item" @click="danmuLikeClick(danmu, index)">-->
      <!--          <svg-icon-->
      <!--            :icon-class="danmu.clickLike ? 'give-dark' : 'give-light'"-->
      <!--            :style="{ color: danmu.clickLike ? '#fd5a5a' : '' }"-->
      <!--          />-->
      <!--        </div>-->
      <!--        &lt;!&ndash;点赞数&ndash;&gt;-->
      <!--        <span v-show="danmu.likeCount > 0">-->
      <!--          <span v-if="danmu.likeCount < 100">-->
      <!--            {{ danmu.likeCount }}-->
      <!--          </span>-->
      <!--          <span v-else> 99+ </span>-->
      <!--        </span>-->
      <!--      </div>-->
    </template>
    <!--弹幕输入框-->
    <div class="danmu-input-group">
      <div class="danmu-input--tip">留言板</div>
      <div class="danmu-input-wrapper">
        <el-input
          v-model="danmuText"
          style="opacity: 0.6"
          class="danmu-input"
          @focus="isDanmuInputClicked = true"
          @keyup.enter="submitDanmu"
        />
        <el-button
          v-show="isDanmuInputClicked"
          class="danmu-submit"
          round
          style="opacity: 0.6"
          @click="submitDanmu"
        >
          发送
        </el-button>
      </div>
    </div>
  </Danmaku>
</template>

<style scoped>
.danma-container {
  width: 100vw;
  height: calc(100vh - 70px);
  background: url('./../../assets/image/danmu-bg.webp') no-repeat 100% 100%;
  background-size: cover;

  .danmu-item {
    border-radius: 30px;
    padding: 3px 5px;

    &:hover {
      background-color: #222b2d;
      color: #f9f9f9;
    }

    .danmu-item--avatar {
      height: 30px;
      width: 30px;
      border-radius: 50%;
    }

    .danmu-item--text {
      margin-left: 10px;
    }

    .danmu-item--suspend {
      display: flex;
      align-items: center;
      padding: 0px 10px;

      .suspend-item {
      }
    }
  }
  .btn-item--me {
    border: 1px solid #888;
    background: rgba(255, 255, 255, 0.2);
  }

  .danmu-input-group {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    margin: auto;
    width: 400px;
    text-align: center;

    .danmu-input--tip {
      position: relative;
      font-size: 30px;
      font-weight: 600;
      color: #ffffff;
      z-index: 999;
    }

    .danmu-input-wrapper {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;

      height: 2.5rem;
      margin-top: 2rem;
      z-index: 999;

      .danmu-input {
      }

      .danmu-submit {
        height: inherit;
        padding: 0 25px;
        margin-left: 3px;
        border-radius: 30px;
        animation: left-in 0.6s ease;
      }
    }
  }
}

/* 动画 输入提交按钮从左边弹出并小幅度摇晃*/
@keyframes left-in {
  0% {
    transform: translateX(-600%);
  }

  40% {
    transform: translateX(15%);
  }

  60% {
    transform: translateX(-10%);
  }

  80% {
    transform: translateX(5%);
  }

  100% {
    transform: translateX(0);
  }
}
</style>

<style>
.el-input__wrapper {
  border-radius: 30px;
}
</style>
